<template>
	<div class="BindingCar" @click="Body">
		<div class="BindingCar-body">
			<div class="BindingCar-Title">
				<div class="BindingCar-Title-Left">
					<div class="BindingCar-left"></div>
					<div class="BindingCar-right">绑定银行卡</div>
				</div>
				<div class="Jump" @click="GotoOk()">
					跳过此步
				</div>
				
			</div>
			<div class="BindingCar-Cont">
				<div class="BindingCar-Cont-Box">
					<div class="BindingCar-Cont-Box-User">
						<div class="BindingCar-Cont-Box-User-Title">注册账号:</div>
						<div class="BindingCar-Cont-Box-User-Num">13700000000</div>
					</div>
					<div class="BindingCar-Cont-Box-User">
						<div class="BindingCar-Cont-Box-User-Title">家长姓名:</div>
						<div class="BindingCar-Cont-Box-User-Num">小明爸爸</div>
					</div>
					<!-- <div class="BindingCar-Cont-Box-User">
						<div class="BindingCar-Cont-Box-User-Title">身份证号:</div>
						<div class="BindingCar-Cont-Box-User-Num">440682000000000000</div>
					</div> -->
				</div>
				<div class="BindingCar-Cont-CarNum" @click.stop="CarNum">
					<ipt ref='ipt'></ipt>
				</div>
				<div class="BindingCar-Cont-Tips">
					*为保证账户资金安全,只能绑定用户本人的银行卡 
				</div>
				<div class="BindingCar-Cont-Check">
					<!--确认框状态-->
					<div class="BindingCar-Cont-Check-iconTrue" v-if="CardCheck" @click="CardChecked()">
						<img src="static/img/BankCard/hock1.png" width="100%"/>
					</div>
					<div class="BindingCar-Cont-Check-iconFalse" v-else @click="CardChecked()">
						<img src="static/img/BankCard/hock.png" width="100%"/>
					</div>
					<!--确认框右文字-->
					<div class="BindingCar-Cont-Check-Font">
						接受 <span @click="MskCheck()">《淘迪儿童服务协议》</span>
					</div>
				</div>
				<div class="BindingCar-Cont-Btn">
					<button @click="AllOk()">确认绑定</button>
				</div>
			</div>
			<div class="BindingCar-Margin"></div>
			<div class="BindingCar-Title">
				<div class="BindingCar-Title-Left">
					<div class="BindingCar-left"></div>
					<div class="BindingCar-right">快捷开卡通道</div>
				</div>
			</div>
			<div class="BindingCar-Cont2">
				<div class="BindingCar-Cont2-Banner">
					
				</div>
				<div class="BindingCar-Cont2-Tips">
					若无尧都农商银行卡,您可以从下面入口进入开卡页面,成功开卡后即可自动绑定。
				</div>
				<div class="BindingCar-Cont2-Btn">
					<button>快捷开卡入口</button>
				</div>
			</div>
		</div>
		<transition name="fade">
		<div class="Msk-Html" v-show='MskChecked' @click="MskCheckFalse()">
			<div class="Msk-Body" @click.stop>
				<div class="BindingCar-Title" style="justify-content: flex-start;height: 10%;">
					<div class="BindingCar-left"></div>
					<div class="BindingCar-right">淘迪儿童服务协议</div>
				</div>
				<div class="Msk-Body-cont">
					<p v-for="item in 50">淘迪儿童服务协议详细描述,淘迪儿童服务协议详细描述,淘迪儿童服务协议详细描述</p>
					<div class="Msk-Btn">
					<button @click="MskCheckFalse()">确认</button>
				</div>
				</div>
				
			</div>
			
		</div>
		</transition>
		<transition name="fade">
			<Message :mes="mes" :check='TdChecked' v-on:check="check1"></Message>
		</transition>
		<KeyOnly ref='KeyOnly'></KeyOnly>
	</div>
</template>

<script>
	import Message from '@/assets/assembly/Message'
	import Ipt from '@/assets/assembly/Ipt'
	import KeyOnly from '@/assets/assembly/KeyOnly'
	export default {
		name: 'BindingCar',
		data() {
			return {
				CardCheck:false,
				MskChecked:false,
				TdChecked:false,
				mes:''
			}
		},
		components: {
			Message,Ipt,KeyOnly
		},
		mounted(){
			this.$refs.ipt.filter = true;
			this.$refs.ipt.padding = 10;
		},
		created: function() {},
		methods: {
			//输入卡号
			CarNum(){
				this.$refs.ipt.GbStu = true;
				this.$refs.KeyOnly.BottomStu = true;
				this.$refs.ipt.padding = 10;
				this.$refs.ipt.filter = true;
				this.$refs.KeyOnly.Xs = true;
			},
			Body(){
				this.$refs.ipt.GbStu = false;
				this.$refs.KeyOnly.BottomStu = false;
			},
			CardChecked:function(){
				this.CardCheck=!this.CardCheck
			},
			MskCheckFalse:function(){
				this.MskChecked=false
			},
			MskCheck:function(){
				this.MskChecked=true
			},
			TdCheckFalse:function(){
				this.TdChecked=false
			},
			//跳转注册成功
			GotoOk:function(){
				this.$router.push({
					path: `/SuccessInfo`
				})
			},
			AllOk:function(){
				if(this.$refs.ipt.Num.length < 16) {
					this.mes = '请输入正确的银行卡号'
					this.TdChecked = true
				}
				else if(!this.CardCheck)
				{
					this.TdChecked=true
					this.mes="请阅读并勾选授权书。"
					
				}
				else
				{
					this.$router.push({
					path: `/SuccessInfo`
					})
				}
				
			},
			check1(e) {
				this.TdChecked = e
			}
		}
	}
</script>

<style scoped>
	@import url("css/BindingCar.css");
</style>